<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>冷/热度日</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/index.css" />
  <link rel="stylesheet" href="css/swiper.min.css" />
  <link rel="stylesheet" href="js/layui/css/layui.css" />
  <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>

    <div class="section">
        <div class="query_bt">
            <div class="bt_nr_city">
                <img class="dw" src="images/dw.png">
                <span id="city_name">重庆·渝中·大坪正街</span>
                <i class="fa fa-angle-down"></i>
                <p>数据来源：中国环保网</p>
            </div>
        </div>
        <div class="query_nr">
            <div class="query_nr_bt" style="background: rgba(0,0,0,0)">
                <i class="fa fa-angle-left"></i>
                <span>2020年11月</span>
                <i class="fa fa-angle-right"></i>
            </div>
            <div class="query_nr_lb">
                <ul>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                    <li>日</li>
                </ul>
            </div>
            <div class="query_nr_rq">
                <table>
                    <tr>
                        <td class="hui">
                           <span>29</span>
                           <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td class="hui">
                           <span>30</span>
                           <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td class="hui">
                           <span>31</span>
                           <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>1</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>2</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>3</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                        <td>
                            <span>4</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>5</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>6</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>7</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                        <td>
                            <span>8</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                        <td>
                            <span>9</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>10</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>11</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>12</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>13</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>14</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                        <td>
                            <span>15</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>16</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>17</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                        <td>
                            <span>18</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>19</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>20</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>21</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                        <td>
                            <span>22</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>23</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>24</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                        <td>
                            <span>25</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>26</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>27</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>28</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="zz_you">低温</a>
                               
                            </div>
                        </td>
                        <td>
                            <span>29</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="gw">高温</a>
                                
                            </div>
                        </td>
                        <td>
                            <span>30</span>
                            <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td class="hui">
                           <span>1</span>
                           <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                        <td class="hui">
                           <span>2</span>
                           <img src="images\weather\lan\多云.png">
                            <div class="rq_list">
                                <a class="dw">低温</a>
                                
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="query_quality">
            <div class="quality_bt">
                <span>重庆实时空气质量指数</span>
                <p>更新：2020年04月22日  21日时</p>
            </div>
            <div class="quality_nr">
                <img class="nr_img" src="images/zz_sz.png">
                <span class="nr_zs">56</span>
            </div>
        </div>

        <div class="query_dh">
            <ul>
                <li class="active">
                    <img class="xz" src="images/dh_jy.png">
                    <img class="xz1" src="images/dh_jy1.png">
                    <span>降雨</span>
                </li>
                <li class="active">
                    <img class="xz" src="images/dh_wd.png">
                    <img class="xz1" src="images/dh_wd1.png">
                    <span>温度</span>
                </li>
                <li class="active">
                    <img class="xz" src="images/dh_kq.png">
                    <img class="xz1" src="images/dh_kq1.png">
                    <span>空气质量</span>
                </li>
            </ul>
        </div>
    </div>
	
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/mobile.js"></script>
<script type="text/javascript" src="js/layui/layui.js"></script>


<script type="text/javascript">

    $(function(){
        var index =100;
        kqzl(index);
    });

    function kqzl(index){
        $('.nr_zs').html(index);
        var kqzl = index;
        if(kqzl<=200){
            var yf = 43/200;
            var dq = kqzl*yf;
            $('.nr_zs').css('margin-left',dq+'%');
        }else if(kqzl<=300){
            var yf = 18/100;
            var dq = (kqzl-200)*yf;
            $('.nr_zs').css('margin-left',(dq+45)+'%');
        }
        else{
            if(kqzl>500){
                kqzl = 500;
            }
            var yf = 12/100;
            var dq = (kqzl-300)*yf;
            $('.nr_zs').css('margin-left',(dq+65)+'%');
        }
    }

    layui.use('layer', function(){
        var layer = layui.layer //弹层
    });
</script> 